Journal d'un Terrien

Web log de Serge Boisse

On line depuis 1992 !

Publicité
Si cette page vous a plu, Copiez son adresse et partagez-la !
http://sboisse.free.fr/trucs et astuces/Obsidian/Astuces/_Publier le contenu d_Obsidian sur un site.php
Savez-vous quels sont les articles les plus vendus sur Amazon.fr ?
_Publier le contenu d'Obsidian sur un site
trucs et astuces > Obsidian > Astuces > _Publier le contenu d'Obsidian sur un site

créer un site basé sur les notes Obsidian

Résumé : Créer un site basé sur les notes prises dans Obsidian, chercher une alternative à Obsidian Publish.

Obsidian publish

Il y a bien sûr Obsidian Publish https://obsidian.md/publish
$8 par mois soit $96 par an et par site (en 2025)
Avantages :

  • Compatibilité avec Obsidian markdown et plugins.
  • Contrôle sur ce qui est public ou pas
  • très facile d'utilisation
  • google analytics
  • mots de passe
  • tous les plugins ! (mais seulement leurs résultats au chargement de la note)
  • bientôt : commentaires des lecteurs via Disqus
    Inconvénients
  • il n'y en a qu'un le prix. (Mais bon, c'est pas excessif) sauf qu'il est en augmentation constante...

Exemples de sites "powered by Obsidian"

A tout seigneur...

J'ai pas encore trouvé de site utilisant dataview...

Une liste de sites obsidian-powered : The all obsidian publish collection (page web)

Alternatives à Obsidian Publish

aucune ne m'a convaincu...
Il y a une liste en ligne ICI (page web)

vault Markdown vers site html

Voir sphinx https://www.sphinx-doc.org/en/master/
Ce logiciel permet de créer un site complet à partir de pages markdown (pas forcément compatible avce le markdown d'obsidian)
Exemple d'application : https://courspython.com/index.html

You can get back in touch with me if any trouble...

Obsidian plugins pour l'export

Dans cette page :

Mindstone

Une alternative intéressante à Obsidian Publish est le Mindstone : https://mindstone.tuancao.me/. Ce n'est pas un plugin, mais un générateur de site. Cependant il devrait pouvoir faire marcher des plugins ? Pas réussi à le faire marcher correctement.

Pubsidian

L'approche est originale : un exécutable "convertisseur" qui prend les .md et les pièces jointes, et crée un repertoire  OUTPUT  qu'il suffit de publier ensuite.
A priori je ne vois pas comment ça pourrait rendre les résultats Dataview mais on ne sait jamais, après tout obsidian publish le fait bien ! (en fait non, pas le dataviewJS avec interraction del'utilisateur)

Quartz

Est un système de prise notes markdown online qui ressemble beaucoup à obsidian mais avec des différences... la traduction de l'un vers l'autre semble compliquée. Encore que ?
Quartz (page web)
Quartz fonctionne à partir de Hugo (page web) qui est est un générateur de sites statiques à partir de markdown.
Le problème ce sont les plugins de Obsidian qui ne sont pas pris en charge...

Perlite

Permet de créer un site obsidian dynamiquement à partir des .md., un peu comme Mindstone. Sauf que ça fonctionne !

Cf. Perlite

Obsidian-zola

utilise GitHub et Netlify (encore !)

https://github.com/ppeetteerrs/obsidian-zola
Si vous avez configuré votre Obsidian avec de nombreux shortcodes, plugins et syntaxes spécifiques à Obsidian, cet outil ne supportera pas (et n'a pas l'intention de supporter) ces fonctionnalités...
Néanmoins Cet exemple (page web) montrer qu'il y a du potentiel... Le graphe est très joli

Neverinstall

Il s'agît d'un hébergeur d'applications qui propose obsidian comme l'une des apps hébergées. A voir ?

Jekyll

Encore un Convertisseur md -> html qui utilise GitHub et Netlify avec plein de limitations semble-t-il.

Markbase

C'est un SaaS (Software as a Service)
cf l'article I built Markbase (page web), et le site du service : Markbase (page web) : Le vault se retrouve donc sur le site de Markbase seulement

Le plan de base est gratuit pour les early birds (ok...).
ça semble quand même à un alpha test... assez buggy...
Ne supporte pas les notes dans des répertoires, i.e [[note]] retrouvera note.md seulement dans le répertoire initial... il faut donc des liens avec le path complet.

publish par obsidian-userland

Apparemment il suffit d'installer un index.html spécifique dans le Vault et de pointer un serveur web local dessus ? ça ressemble à Perlite mais en javascript ?
Le truc, c'est qu'il n'y a qu'une page, l'index, et que les autres pages ont des URL en "site/#/page"

ça affiche bien la page "PAR OU COMMENCER" (sans l'image) mais uniquement la page, pas de menu etc.. donc conversion md->html, mais c'est tout ? Si je modifie la page md, ça n'est pas changé sur le site...
Le script appelé par la page html (une fois dé-minified) fait 61955 lignes !

Je l'ai sauvegardé dans NOM (Fichier sur D)(lien privé) (lien privé)
et aussi dans le vault.

Apparemment pas d'autres ressources chargées mais le .js fait des références externes à react, MathsML, svg, xhtml, focus-lock. Bon, rien de méchant.
Le script ne contient pas le mot "obsidian" ce qui veut dire qu'il ne va pas chercher les plugins, thèmes, etc ?

Obsidian-export

Cf. Obsidan-export (GitHub)
et aussi Crate obsidian-export (page web)
Semble utiliser les post-processeurs ce qui est bien ! (mais très peu)
C'est écrit en Rust ce qui est moins bien ! Mais il y a une version windows .exe ...

Obsidian digital garden

c'est un plugin, donc on peut publier les notes comme dans la preview.
Cf. Obsidian Digital Garden? Utilise Github, Netlify (encore, eh oui !)

OzanShare Publish

Encore un plugin mais combiné à une web app.
Cf. OzanShare (page web) et repo sur GitHub. Semble assez complet... Mais 10€ par mois !

En fait, pas si complet :

Custom CSS is also separated from Obsidian. It is a custom solution that tries to solve your need to share single pages with people. You can adjust your Custom CSS using the link provided under the plugin settings.

Ce que je voudrais

C'est :

Programmons-donc nous même !

noms possibles de plugins :

idées :

Obseedian
YAOPA : Yet Another Obsidian Plugin Alternative ! (attention site yaopa.com à vendre)
myObsidianWebsite OK !

Donc...

Etape 1 clone Obsidian Help

Voir comment est structurée l'aide en ligne Obsidian
cf Essai de clone de Obsidian Help

Etape 2 trouver un système

Plusieurs solutions sont possibles pour l'architecture du site

architectures possibles du site

  1. Structure du site identique à celle du coffre.
    à chaque note xxx.md (qui seraient donc sur le site) pourrait correspondre un fichier xxx.php qui convertirait le contenu du markdown en html à la volée. Problème, les plugins ?

  2. Fichiers md. sur le site. Un fichier index.php sur le site servirait de point d'entrée. Les URL seraient site/?file=. Solution retenue par Perlite ou bien site/#/filenameSolution retenue par publish par obsidian-userland

  3. Uniquement les html sur le site . Les md restent dans le coffre. Pour chaque note path/xxx.md du coffre, le site contiendrait /path/xxx.html. (et bien sûr aussi les css et attachements) Nécessite un convertisseur offline.

    3.1. variante : les HTML seraient crées par un plugin ou un script templater (ou autre). ils seraient stockés localement avec les CSS, fonts, et les js des plugins exécutables en ligne. Ensuite il suffit de transférer le tout avec ftp sur le site.

  4. idem, mais tous les html à la racine du site. /path/note.md serait converti en /yyy.html, avec le nom yyy généré à partir du path et nom de la note (et d'un code secret). tous les liens interne convertis. solution retenue par Obsidian share

La meilleure solution est la 3.1 car elle permet un rendu identique a obsidian, y compris les plugins dynamiques comme DataviewJS (qui peut créer des élèments html à la volée) à et Execute-code. C'est celle que je retiens pour créér mon plugin : my Obsidian website (plugin)

pour la publication :

Si les .md sont sur le site, un générateur en php, ou html contenant du js, lui aussi sur le site, fabriquerait les .php ou .html à publier.

Sinon, il faut convertir offline le vault en un ensemble de fichiers html, css... qu'il faudra installer manuellement sur le site
ça peut être fait par un exécutable externe, un fichier html contenant du js installé dans le vault, (MAIS pas de plugin exécuté dans ce cas)

un plugin Obsidian, ou même templater avec un script js

Je retiens cette solution

mise à jour.

Le plus simple est de tout regénérer et recopier, mais évidemment c'est lourd...
cf. Workflow pour la publication sur mon site

La structure des pages sur le site

On va reprendre celle de Obsidian Help :

structure de base de la page web

structure de base de la page web

La structure de base de chaque page du site ObisidanHelp ( web) est très simple :
index après éxécution du js (Fichier sur D)(lien privé)

<html>
<head>
...titre, méta, icônes et appelle le script app.js
</head>
<body class="theme-light">
--- set site info et charge purify
<div class="published-container print is-readable-line-width has-navigation has-graph has-outline">
	<div class="loader-cube" style="display: none;">...</div>
	<div class="site-body">
		<div class="site-body">
			<div class="site-body-left-column">
			...site logo, site name, toggle, search, nav
			</div>
			<div class="site-body-center-column">
			... header, render_container, texte
			</div>
			<div class="site-body-right-column">
			... graph view, table of contents
			</div>
		</div>
	</div>
	<div class="nav-backdrop"></div>
</div>
... chargement de pixi.js (pour le graphique de droite)
</body>
</html>

On notera qu'il n'y a aucun autre appel de script dans le html en dehors de purify et pixi, c'est donc app.js qui gère toute l'interaction

markdown vers HTML

#conversion
Il existe des convertisseurs .md --> html en php. cf. PHP markdow libraries (page web). Pas sûr que ça marche avec php 5.3... en fait c'est 7.3 mini en général...

$parser = new Parsedown();
echo $parser->text('# Hello World!');
// "<h1>Hello World!</h1>"

à l'inverse obsidian convertit automatiquement le HTML en markdown par copier-coller... cf Copier du HTML en markdown Mais bon, c'est l'inverse que je veux...

Cela inclut des plugins Obsidian :

  • obsidian-share-as-gist (GitHub)

  • Pandoc peut exporter une page en HTML ! y compris Latex, (mais pas de Dataview, Mermaid, Desmos, transclusions... )

  • idem pour Obsidian Enhancing Export Plugin, basé sur pandoc... Cf. doc (GitHub) qui peut aussi exporter du .md pour Hugo. En fait c'est juste un wapper de pandoc -> désinstallé.

et d'autres services :

@ Markdown en HTML
@ Markdown en HTML

Notons que dans l'API obsidian, il y a une fonction renderMarkdown() qui transforme le md en html, y compris tous les résultats des post-processeurs (dataview, etc)
cf Obsidian API (page web)
et Markdown to html (page web sur le forum Obsidian)

Obsidian share

Pour convertir UNE note en HTML, il y a Obsidian share (page web) Rendu apparemment identique au rendu par Obsidian view mode, au pixel près : !

Je retiens cette solution... pour le moment.

en fait non, je vais créer mon plugin !

obsidian-webpage-export (webpage HTML)

webpage export
webpage export

Obsidian webpage export

A remettre à jour. La nouvelle version est bien plus puissante ! #TBC

Il s'agit d'un plugin. Il exporte un document en html, un peu comme obsidianshare, sauf qu'il peut aussi exporter tout le coffre... Wow !

On clique sur le menu de la page, "export to HTML", et le plugin ouvre un modal qui permet de choisir les options (le plugin n'a pas d'options générales)
Pasted image 20230117164532.png

Ensuite, on peut choisir le répertoire de destination
En in-linant tout, la galerie markdown fait 2Mo en HTML...

Le résultat est pas mal :

  • Liens internes et externes (sauf vers mon NAS mais c'est vraiment spécial)
  • transclusions
  • callouts dynamiques
  • MathJax
  • Mermaid
  • Dataview
  • Desmos OK avec la nouvelle version.
  • DataviewJS
  • Excalidraw
  • canvas
Remarque

Il y a une table de contenu de la page !
et un commutateur sombre/clair

webpage HTML export plugin.jpg


page créée le 18/03/2025 à 15:09
modifiée le 17/12/2024 à 20:19

réutilisation dans mon plugin

Desmos ne s'affiche pas, pourtant j'ai ajouté obsidian-desmos et obsidian-icons-plugin dans la liste. Mais il y a une erreur d'API. Je l'ai corrigée en supprimant du code js dans le html généré entre //desmos returns an error... et </script>. Bonus, on peut zoomer et scroller sur le graphe ! il faudra modifier le plugin... voir aussi la doc de l'API de Desmos (page web)
Les snippets CSS ne sont pas pris en compte. Mais c'est assez facile à corriger.

structure du code HTML généré

Le plugin crée le répertoires images, j'ai ajouté le répertoire "public" pour éviter des erreurs. Ensuite il crée les fichiers
"obsidian-style.css", "plugin-styles.css" (le style de la sidebar), "snippets.css", "theme.css" et "webpage.css", et bien sûr le fichier html de la page.

Sa structure :

flex-container
	sidebar left : togle light/dark
	markdown-reading-view
	  markdown-preview-view
	    markdown-preview-sizer
	       markdown-preview-pusher
	       mod-header
	       inline-title
	       frontmatter (Aie! il est donc conservé même si pas affiché)
	       <le contenu de la page>
	sidebar right

export du coffre entier

J'ai essayé de convertir en html le coffre-test que j'avais fait pour Perlite cf export coffre test Perlite (Répertoire sur D)(lien privé)

Le plugin crée deux nouveaux fichiers, "theme.css", "snippets.css" : mais ce dernier ne contient qu'une liste de fichiers css commentés...

essayons avec tout le contenu de ce coffre ... 1127 messages dans la console, dont 88 erreurs ! Dont une fatale...
Je recommence en "partant" de la note PAR OU COMMENCER
résultat : 3501 messages, 102 erreurs 'file not found", et une erreur fatale Uncaught (in promise) TypeError dans Node.

Sinon, c'est quand même pas mal. Je note que lorsque la note ne comporte aucun hx, (#, ## etc) alors la colonne de contenu du site n'est pas créée...

Au bout de 4 jours d'efforts, les bugs sont corrigés et j'ai pu exporter tout le coffre.

Synthèse ?

Perlite ou Mindstone pour le look du site, et Obsidian Share pour le rendu des pages, (ensemble, mais avec des modifs conséquentes) sont les pistes les plus prometteuses. Ou bien Obsidian Digital Garden ?

Finalement je retiens le principe de obsidian-webpage-export (webpage HTML), mais je vais le cloner et le modifier pour faire un nouveau plugin : my Obsidian website (plugin) !

le résultat

Reste à faire :

Publicité
Commentaires

Commentaires (0) :

Page :



Ajouter un commentaire (pas besoin de s'enregistrer)

Pseudo :
Message :


image de protection
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !
Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.
< Retour en haut de la page